<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>事件指令v-on 取值定义</h3>
        <!-- 
           v-on:事件名="执行回调|Object|Array|inline Statement"
                + inline Statement (行内表达式) = 定义的内联表达式基本上都是对响应式仓库数据进行赋值的操作
                                                = 定义的内联表达式可以通过;方式分割，一个v-on事件可以同时绑定多个内联表达式
                + Array = 在一条v-on事件语法中，实现对同一个事件的多回调绑定
                + Object = v-on定义时不描述事件参数; 实现对同一个标签一次性完成多个事件的回调定义
        -->
        <h4>v-on取值行内表达式-inline Statement</h4>
        <p>msg:{{ msg }}</p>
        <input type="button" value="修改MSG值" @click="changeMsg()">
        <input type="button" value="修改MSG值" @click=" msg = Math.random() ">
        <p>info:{{ info }}</p>
        <input type="button" value="修改MSG,INFO值" @click=" msg = Math.random(); info = Math.random(); "><br>
        <p v-if="isShow" >flag控制元素显示隐藏</p>
        <input type="button" value="切换显示" @click=" isShow=!isShow ">
        <p v-bind:class=" classStr ">颜色切换</p>
        <input type="button" value="切换颜色" @click=" classStr = (classStr=='red'?'blue':'red') ">

        <h4>v-on取值数组-Array</h4>
        <input type="button" value="click绑定多个回调函数" @click="callback"> <br>
        <input type="button" value="click绑定多个回调函数" @click=" [funA,funB] "> <br>
        <!-- 下述绑定无法执行方法 -->
        <!-- <input type="button" value="click绑定多个回调函数" @click=" [funA(),funB()] "> <br> -->
        <!-- 为解决上述绑定事件无法值的问题，vue提供特殊取值规则 -->
        <input type="button" value="click绑定多个回调函数" @click=" funA(),funB() "> <br>

        <h4>v-on取值对象-Object</h4>
        <input type="button" value="同时绑定click和mounsedown" v-on=" events "><br>
        <input type="button" value="同时绑定click和mounsedown" v-on=" { click:clickCB,mousedown:mousedownCB } "> <br>
        <!-- 下述绑定无法执行方法 -->
        <!-- <input type="button" value="同时绑定click和mounsedown" v-on=" { click:clickCB(),mousedown:mousedownCB() } "> -->
        <input type="button" value="同时绑定click和mounsedown" v-on:click="clickCB()" v-on:mousedown="mousedownCB()" >

    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    msg:"msg变量",
                    info:"info变量",
                    isShow:true,
                    classStr:"red",
                    callback:[
                        function(){
                            console.log("data-1")
                        },
                        function(){
                            console.log("data-2")
                        }
                    ],
                    events:{
                        click:function(){
                            console.log("click")
                        },
                        mousedown:function(){
                            console.log("mousedown")
                        }
                    }
                }
            },
            methods:{
                changeMsg(){
                    this.msg = Math.random();
                },
                funA(){
                    console.log("funA-1")
                },
                funB(){
                    console.log("funB-2")
                },
                clickCB:function(){
                    console.log("click")
                },
                mousedownCB:function(){
                    console.log("mousedown")
                }
            }
        }).mount("#app")
    </script>
</body>
</html>